@extends('layouts.app')

@section('title', '设计饭卡')

@section('css-import')
<style type="text/css">
.form-input-control{
	margin-bottom: 20px;
}
.loadCardBackground{
	width: 350px;
	display: block;
	margin:15px;
}
</style>
@endsection

@section('content-fluid')

<h3 class="page-title">设计饭卡</h3>
<form action="/cardCreateAction" method="post" enctype="multipart/form-data" id="addCardForm">
	<div class="row">
		<div class="col-md-6">
			<label class="control-label">名称</label>
			<input type="text" name="cardname" value="" class="form-control form-input-control" AUTOCOMPLETE="off" placeholder="饭卡名称" alt="饭卡名称">
			
			<label class="control-label">业务类型</label>
				<label class="fancy-radio">
					<input name="business_type" value="SJ" type="radio">
					<span><i></i>跟随时间递减</span>
			    </label>
			    <label class="fancy-radio">
					<input name="business_type" value="CK" type="radio">
					<span><i></i>次数卡</span>
				</label>
				<label class="fancy-radio">
					<input name="business_type" value="XS" type="radio">
					<span><i></i>限时卡</span>
				</label>
				<label class="fancy-radio form-input-control">
					<input name="business_type" value="ZH" type="radio">
					<span><i></i>组合卡</span>
				</label>
			<div class="limitdaynum hide">
				<label class="control-label">限制天数</label>
				<input type="number" name="limitday" AUTOCOMPLETE="off" value="" class="form-control limit_days form-input-control" alt="限制天数" placeholder="时间内可用，超时作废">
			</div>
			<div class="groupcard hide">
				<label class="control-label">组合次数</label>
				<input type="number" name="num_198" value="" min="0" AUTOCOMPLETE="off" class="form-control groupnum form-input-control" alt="198次数" placeholder="198套餐在组合卡中可用次数">
				<input type="number" name="num_258" value="" min="0" AUTOCOMPLETE="off" class="form-control groupnum form-input-control" alt="258次数" placeholder="258套餐在组合卡中可用次数">
				<input type="number" name="num_298" value="" min="0" AUTOCOMPLETE="off" class="form-control groupnum form-input-control" alt="298次数" placeholder="298套餐在组合卡中可用次数">
			</div>
			
			<label class="control-label">开始可用时间，每天的</label>
			<input type="time" name="starttime" class="form-control form-input-control" alt="开始可用时间">
			
			<label class="control-label">结束可用时间，每天的</label>
			<input type="time" name="stoptime" class="form-control form-input-control" alt="结束可用时间">
			
			<label class="control-label">可消费的最高餐品价格</label>
			<input type="text" name="mealprice" AUTOCOMPLETE="off" class="form-control form-input-control" placeholder="可消费的最高餐品价格" alt="可消费的最高餐品价格">
			
			<label class="control-label">可用次数</label>
			<input type="number" name="frequency" AUTOCOMPLETE="off" class="form-control form-input-control" placeholder="该卡的全部可用次数" alt="可用次数">
			
			<label class="control-label">每日可用次数</label>
			<input type="number" name="once" value="1" AUTOCOMPLETE="off" class="form-control form-input-control" alt="每日可用次数">
			
			<label class="control-label">出售价格</label>
			<input type="text" name="price" value="" AUTOCOMPLETE="off" class="form-control form-input-control" placeholder="饭卡出售价格" alt="饭卡出售价格">
			
			<label class="control-label">饭卡描述</label>
			<textarea name="desc" class="form-control form-input-control" placeholder="描述一下饭卡使用规则" alt="饭卡使用规则"></textarea>

			<label class="control-label">发布范围</label>
				<label class="fancy-radio">
					<input name="range_id" value="0" type="radio">
					<span><i></i>全区域</span>
			    </label>
			    @foreach($circles as $k=>$v)
			    <label class="fancy-radio">
					<input name="range_id[]" value="{{$v->circle_id}}" type="checkbox">
					<span><i></i>{{$v->circle_name}}</span>
				</label>
				@endforeach
			<br>
			<label class="control-label">是否免配送费</label>
				<label class="fancy-radio">
					<input name="delivery_free" value="0" type="radio">
					<span><i></i>收费</span>
			    </label>
			    <label class="fancy-radio">
					<input name="delivery_free" value="1" type="radio">
					<span><i></i>免费</span>
				</label>
			<br>
			<label class="control-label">背景图</label>
			<img src="" class="loadCardBackground">
			<input type="file" name="mealcardBackground" class="form-input-control" alt="背景图">

			<input type="submit"  class="btn btn-primary btn-toastr center-block" value="创建饭卡">
		</div>
	</div>
</form>
@endsection

@section('js-import')
<script type="text/javascript" src="{{config('app.inlet_src')}}/a/js/design.js"></script>
@endsection

@section('js-write')
<script type="text/javascript">
	$('input[type=file][name=mealcardBackground]').change(function(e){
		var files = e.target.files;
		var v = $(this).val();
		var reader = new window.FileReader();
		reader.readAsDataURL(files[0]);
		//异步加载文件成功
	    reader.onload = function(e){
	       // reader.result 表示图片地址
	       $('.loadCardBackground').attr('src',reader.result);
	    }
	});
	
	$('.groupnum').bind('input propertychange',function(){
		var num198 = Number($('input[name="num_198"]').val());
		var num258 = Number($('input[name="num_258"]').val());
		var num298 = Number($('input[name="num_298"]').val());
		$('input[name="frequency"]').val(num198+num258+num298);
	});
	
	$('input[type=radio][name=business_type]').change(function(){
		var value = $(this).val();
		$('input[name="frequency"]').val('');
		if(value=='XS'){
			$('.limitdaynum').removeClass('hide');
			$('.groupcard').hasClass('hide')?'':$('.groupcard').addClass('hide');
		}else if(value=='ZH'){
			$('.groupcard').removeClass('hide');
			$('.limitdaynum').hasClass('hide')?'':$('.limitdaynum').addClass('hide');
		}else{
			$('.limitdaynum').hasClass('hide')?'':$('.limitdaynum').addClass('hide');
			$('.groupcard').hasClass('hide')?'':$('.groupcard').addClass('hide');
		}
	});
</script>
@endsection